<template>
  <view class="flex-col page">
    <scroll-view class="flex-col list" scroll-y="true">
      <u-skeleton rows="10" :loading="loading" :title="false" rowsHeight="110">
      </u-skeleton>

      <view v-if="dataList.length < 1 && isNodata">
        <zNo></zNo>
      </view>

      <view
        class="list-item justify-center"
        :key="i"
        v-for="(item, i) in dataList"
        style="flex-shrink: 0; position: relative"
      >
        <view
          style="
            box-sizing: border-box;
            background-color: #dabc8f;
            position: absolute;
            top: 0;
            left: 0;
            color: #ffffff;
            border-top-left-radius: 12rpx;
            width: 40rpx;
            text-align: center;
            border-bottom-right-radius: 12rpx;
            font-size: 22rpx;
            padding: 1px 4px;
          "
          v-if="item.new || item.label_new"
          >新</view
        >

        <view
          class="left-section flex-col items-center"
          :style="{
            backgroundImage: `url(${item.avatar}?x-oss-process=image/resize,m_fill,quality,q_100,w_400,h_400)`,
            position: 'relative',
            'background-size': '140rpx 140rpx',
          }"
          @click="previewimageavatar(item.avatar)"
          style="height: 140rpx"
        >
          <view
            style="position: absolute; top: -15px; right: 0"
            v-if="item.label_hot"
          >
            <image
              src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/hot.gif"
              class="label_hot"
              mode="widthFix"
            ></image>
          </view>

          <view
            style="position: absolute; bottom: -10px; right: 0"
            v-if="item.label_excellent"
          >
            <image
              src="https://diaocangdaojia.oss-cn-beijing.aliyuncs.com/img/9e353c559b63b4cdb7cfce6c94bcf037.gif"
              class="label_excellent"
              mode="widthFix"
            ></image>
          </view>
          <view class="ul1" v-if="item.yue == 1 && item.work_status"
            >可服务</view
          >
          <view class="ul4" v-else-if="item.yue == 2 && item.work_status"
            >可预约</view
          >
          <view class="ul2" v-else>服务中</view>
        </view>

        <view class="center-group flex-col">
          <view class="group_4 flex-row">
            <view
              ><text class="text_5 text_6">{{ item.realname }}</text></view
            >
            <text class="moreImg" @click="preview(item.album)">生活照</text>
          </view>
          <view class="group_5 flex-row flex ane">
            <u-icon
              v-for="(sitem, sindex) in 1"
              :key="sindex"
              name="star-fill"
              size="16"
              color="#ff6100"
            >
            </u-icon>
            <text class="text_7">{{ item.praise }}</text>
            <text class="t8">已服务:{{ item.sales }}单</text>
          </view>

          <view class="group_7 flex-row">
            <image
              src="../../static/my/s.png"
              class="image_13"
              @click="toTeinfoall(item.id)"
            />
            <text class="text_12 text_13" @click="toTeinfoall(item.id)">{{
              item.shop_name
            }}</text>
            <image
              src="../../static/my/p.png"
              class="image_15"
              @click="toComment(item)"
            />
            <text class="text_14 text_15">{{ item.comment }}</text>
            <image
              v-if="item.collect"
              src="../../static/my/itemc.png"
              class="image_17"
              @click="changeCollect(item, i, 0)"
            />
            <image
              v-else
              src="../../static/my/s1.png"
              class="image_17"
              @click="changeCollect(item, i, 1)"
            />

            <text class="text_16 text_17">{{ item.collectCount }}</text>
          </view>
        </view>
        <view class="right-group flex-col">
          <view class="flex ane image_71txt" style="justify-content: flex-end">
            <image src="../../static/my/d.png" class="image_71" />
            <text class="text_19">{{ item.distance }}km</text>
          </view>

          <view
            class="bottom-text-wrapper flex-col items-center"
            @click="toPath(item)"
            v-if="item.yue == 1 && item.work_status"
          >
            <text>立即下单</text>
          </view>
          <view
            class="bottom-text-wrapper flex-col items-center"
            @click="toPath(item)"
            v-else-if="item.yue == 2 && item.work_status"
          >
            <text>立即预约</text>
          </view>
          <view
            class="bottom-text-wrapper flex-col items-center gayer"
            @click="toPath(item)"
            v-else
          >
            <text>正在上钟</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!--底部弹出-->
    <u-popup
      :show="showInfo"
      mode="bottom"
      @close="close"
      round="10"
      :closeable="true"
    >
      <view style="padding-top: 40px">
        <view class="info-head">
          <view class="head-wrpper">
            <view class="section_2 flex-row">
              <view class="image">
                <image
                  style="width: 130rpx; height: 130rpx; border-radius: 50%"
                  mode="scaleToFill"
                  :src="technician.avatar"
                >
                </image>
              </view>

              <view class="text-group_6 flex-col justify-between">
                <view class="text_1 flex">
                  <view>{{ technician.realname }}</view>
                  <u-rate
                    :count="tecount"
                    v-model="tecount"
                    activeColor="#FF6100"
                  ></u-rate>
                  <view style="color: #ff6100">{{ technician.praise }}</view>
                </view>

                <view class="paragraph_1">
                  {{ technician.profile }}
                </view>
                <view class="flex-row section_4" @click="toTeinfo">
                  <view class="flex-row">
                    <image
                      class="icon_3"
                      src="../../static/add/0.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">实名认证</text>
                  </view>
                  <view class="image-text_31 flex-row justify-between">
                    <image
                      class="icon_3"
                      src="../../static/add/1.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">爽约包退</text>
                  </view>
                  <view class="image-text_32 flex-row justify-between">
                    <image
                      class="icon_3"
                      src="../../static/add/2.png"
                      mode="aspectFit"
                    ></image>
                    <text class="text_1">资质证书</text>
                  </view>
                  <view class="">
                    <image
                      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844681219446616.png"
                      class="image_6"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="comment-cont" v-if="commentShow" @click="toTeinfo">
            <view>
              <image
                class="icon_3"
                src="../../static/add/0.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">实名认证</text>
            </view>
            <view>
              <image
                class="icon_3"
                src="../../static/add/1.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">爽约包退</text>
            </view>
            <view>
              <image
                class="icon_3"
                src="../../static/add/2.png"
                mode="aspectFit"
              ></image>
              <text class="text_1">资质证书</text>
            </view>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844681219446616.png"
              class="image_6"
            />
          </view>

          <view class="center-wrpper">
            <view v-if="!commentShow">
              <view
                class="flex item-wrpper"
                :key="i"
                v-for="(item, i) in service"
              >
                <view class="img">
                  <image
                    :src="item.cover"
                    style="width: 150rpx; height: 116rpx; border-radius: 5rpx"
                  >
                  </image>
                </view>
                <view class="group_2 flex-col justify-between">
                  <view class="text-wrapper_2 flex-row">
                    <view class="title">{{ item.name }}</view>
                    <view class="title1">超{{ item.sales }}人选择</view>
                  </view>
                  <view class="box_8 flex-row">
                    <view class="left-group flex ane">
                      <text class="text_18 price-font"
                        ><text class="text_16">￥</text>{{ item.price }}</text
                      >
                      <view
                        style="display: inline-flex; color: #727272"
                        class="text_22 flex ane"
                      >
                        <image
                          src="../../static/images/t2.png"
                          class="image_5"
                        />
                        <text class="text_14">{{ item.duration }}分钟</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  class="icon_6 flex-col"
                  v-if="technician.work_status == 1"
                  @click="todetails(item.id, technician_id)"
                  >立即下单</view
                >
                <view class="icon_6 flex-col" v-else>休息中</view>
              </view>
            </view>
            <view
              class="comment"
              v-else
              v-for="item in comment"
              @click="toPress(item)"
            >
              <view class="comment1 flex justify-between">
                <view class="flex"
                  >匿名用户<u-rate
                    :value="item.service_score"
                    :readonly="true"
                    activeColor="#FF6100"
                  ></u-rate>
                </view>
                <view>{{ item.create_time }}</view>
              </view>
              <view class="comment2">
                {{ item.content }}
              </view>
              <view class="comment3 flex">
                <view v-for="item2 in item.name" class="comment3-item">
                  {{ item2 }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <preview-image-vue ref="previewImageRef"></preview-image-vue>
  </view>
</template>

<script>
// import tmSkeleton from "@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue";
import zNo from "@/components/z-no/index.vue";
import previewImageVue from "../previewImage/previewImage.vue";
export default {
  data() {
    return {
      listbJVHRZ5E: [],
      latitude: "",
      longitude: "",
      value: "",
      dataList: [],
      total: 0,
      loading: true,
      page: 1,
      city: "",
      local: 0,
      addressFlg: false,
      showInfo: false,
      technician: {
        nickname: "",
        realname: "",
        avatar: "",
        album: [],
        praise: "",
        sales: 0,
        credit: -1,
        service: "",
        height: 0,
        birthday: 0,
        practice: 0,
        profile: "0",
        collect: 0,
        province: "",
      },
      service: [],
      collect: "",
      comment: [],
      technician_id: "",
      tecount: 1,
      tevalue: 1,
      commentShow: false,
      initLocation: "",
      imgs: [],
      isNodata: false,
    };
  },
  components: {
    previewImageVue,
    // tmSkeleton,
    zNo,
  },
  props: {
    list: {
      default: [],
    },
    isLoad: {
      default: true,
    },
    isCollection: {
      default: false,
    },
  },
  watch: {
    list(val) {
      this.dataList = val;
    },
    total(val) {
      console.log(val);
    },
  },
  created() {
    this.loading = this.isLoad;
    uni.$on("updataDel", (res) => {
      console.log(res);
    });
  },
  methods: {
    toPress(item) {
      this.close();
      uni.setStorageSync("pressInfo", item);
      uni.navigateTo({
        url: "/addPage/pages/press",
      });
    },
    diffTime(t) {
      if (t.indexOf("-") != -1) {
        return 1;
      }
      var date = new Date();
      var now = date.getTime();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var min = date.getMinutes();
      var sec = date.getSeconds();
      var tDate = new Date(
        year,
        month - 1,
        day,
        t.split(":")[0],
        t.split(":")[1]
      );
      var tTime = tDate.getTime();
      var diff = tTime - now;
      var diffInHours = diff / (1000 * 60 * 60);
      if (diffInHours <= 1) {
        return 0;
      } else {
        return 1;
      }
    },
    changeCollect(e, index, type) {
      this.$http
        .post("api/collect/collect", {
          technician_id: e.technician_id ? e.technician_id : e.id,
        })
        .then((res) => {
          if (this.isCollection) {
            this.dataList.splice(index, 1);

            this.total--;
          } else {
            this.dataList[index].collect = !this.dataList[index].collect;
            if (type == 0) {
              this.dataList[index].collectCount--;
            } else {
              this.dataList[index].collectCount++;
            }
          }
        });
    },
    toTeinfo(e) {
      uni.navigateTo({
        url: "/bundle/pages/home/teinfo?id=" + this.technician_id,
      });
    },
    toTeinfoall(e) {
      uni.navigateTo({
        url: "/bundle/pages/home/teinfo?id=" + e,
      });
    },
    async getInfo(id) {
      this.technician_id = id;
      let data = await this.$http.post("api/technician/details", {
        id: id,
        type: 1,
      });
      for (let i in data) {
        this[i] = data[i];
      }
    },
    check_user_login(callback) {
      const isLogin = uni.getStorageSync("userInfo");
      if (isLogin) {
        callback();
      } else {
        uni.showModal({
          title: "提示",
          content: "您还未登录，请先登录~",
          confirmText: "去登录",
          cancelText: "再逛会",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pages/user/login22",
              });
            }
          },
        });
      }
    },
    previewimage(imageUrl) {
      //预览图片
      var self = this;
      this.check_user_login(function () {
        var images = [];
        images.push(imageUrl);
        imageUrl = self.Commond.imgurlreplace(imageUrl);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: imageUrl,
        });
      });
    },
    previewimageavatar(imageUrl) {
      //预览图片
      var self = this;
      this.check_user_login(function () {
        var images = [];
        images.push(imageUrl);
        images = self.Commond.imgurlreplace(images);
        uni.previewImage({
          // 图片路径必须是一个数组 => ['']
          current: 0,
          urls: images,
        });
      });
    },
    confirm() {
      this.page = 1;
      this.dataList = [];
      this.total = null;
      this.init();
    },
    //弹窗后，禁止滚动
    stop() {
      // document.body.style.overflow = "hidden";
    },
    //弹窗关闭后，取消滑动限制
    move() {
      // document.body.style.overflow = ""; //出现滚动条
    },
    toPath(item) {
      if (Number(item.yue) == 0) {
        uni.showToast({
          title: "该技师正在上钟",
          icon: "none",
        });
        return;
      }
      this.commentShow = false;
      this.getInfo(item.technician_id ? item.technician_id : item.id);
      this.showInfo = true;
    },
    todetails(id, technician_id) {
      uni.navigateTo({
        url: `/pages/details/details?id=${id}&type=1&technician_id=${technician_id}`,
      });
    },
    toComment(item) {
      this.getInfo(item.technician_id ? item.technician_id : item.id);
      this.showInfo = true;
      this.commentShow = true;
    },
    close() {
      this.showInfo = false;
    },
    preview(imageUrl) {
      var self = this;
      this.check_user_login(() => {
        imageUrl = self.Commond.imgurlreplace(imageUrl);
        this.$refs.previewImageRef.open(imageUrl);
      });
    },
  },
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh(); //停止当前页面下拉刷新
      this.page = 1;
      this.dataList = [];
      this.total = null;
      this.init();
    }, 500);
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
